<template>
	<view class="conter">

		<header-box :title="title"></header-box>

		<view class="box-info1">
			<block v-for="(item, index) in list" :key="index">
				<view class="box1">
					<view class="box1-left" @click="image">
						<view class="box1-left-image">
							<image class="w148 h148" :src="imgs + item.image" mode=""></image>
						</view>
						<!-- <view class="displex-box">
							4张
						</view> -->
					</view>
					<view class="" style=" color: #717171;">
						<view class="flex justify-between align-center">
							<view class="" style="font-size: 30rpx; color: #000000;">
								{{item.title}}
							</view>
							<view class="money">
								￥{{item.money}}
							</view>
						</view>
						<view class="flex align-center justify-between">
							<view class="" style="margin: 10rpx 0;">
								<u-icon name="clock" color="#717171" style="margin-right: 10rpx;"></u-icon>
								上传时间: {{item.createtime}}
							</view>
							<view class="" @tap="jwup(item.id)"
								v-if="userId == item.uid">
								<!-- <text class="cuIcon-delete"></text> -->
							</view>
						</view>
						<view class="">
							<u-icon name="map" color="#717171" style="margin-right: 10rpx;"></u-icon>
							地址：{{item.address}}
						</view>
					</view>
				</view>
		
				<view class="pt40 pl20 margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.dating"
					:key="id">
					<view class="flex align-center justify-between">
						<view class="">
							大厅示图
						</view>
						<view>楼层信息：{{item1.loceng}}</view>
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" mode="" @tap="phone1(item1.iamge1)"></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" mode="" @tap="phone1(item1.iamge2)"></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" mode="" @tap="phone1(item1.iamge3)"></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>
		
				<view class="pt40 pl20 margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.wutai"
					:key="id">
					<view>
						舞台图
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>
		
				<view class="pt40 pl20 margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.led"
					:key="id">
					<view>
						LED图
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)"  mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">像素：{{item1.textP}}</text>
					</view>
				</view>
		
		
				<view class="pt40 pl20 margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.xuting"
					:key="id">
					<view class="flex align-center justify-between">
						<view class="">
							序列示图
						</view>
						<view>序厅信息：{{item1.xuting}}</view>
						<view>楼层信息：{{item1.loceng}}</view>
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>
		
				<view class="pt40 pl20 margin-top" style="background-color: #FFFFFF;" v-for="(item1, id) in item.huoti"
					:key="id">
					<view>
						货梯图
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>
		
				<view class="pt40 pl20 margin-top" style="background-color: #FFFFFF;"
					v-for="(item1, id) in item.jiedian" :key="id">
					<view class="flex align-center justify-between">
						<view class="">
							接电示图
						</view>
						<view>楼层信息：{{item1.loceng}}</view>
					</view>
					<view class="flex justify-around">
						<image class="w220 h220 r20" :src="imgs + item1.iamge1" @tap="phone1(item1.iamge1)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge2" @tap="phone1(item1.iamge2)" mode=""></image>
						<image class="w220 h220 r20" :src="imgs + item1.iamge3" @tap="phone1(item1.iamge3)" mode=""></image>
					</view>
					<view class="flex justify-around margin-top margin-bottom">
						<text class="dis">长：{{item1.chang}}m</text>
						<text class="dis">宽：{{item1.kuang}}m</text>
						<text class="dis">高：{{item1.gaodu}}m</text>
					</view>
				</view>
				
				
				
				
				
				
				
				<view class="flex-box box2">
					<view class="" style="color: #000000; font-weight: 600;">
						购买用户
					</view>
				
				</view>
				
				
				<view class="user-info" >
					<block  v-for="(item1, id) in item.discuss" :key="index">
						<view class="flex-box" style="padding: 10rpx 0;">
							<view class="user-info-left">
								<view class="user-image">
									<image class="w60 h60" :src="item1.picture" mode=""></image>
								</view>
								<view class="">
									{{item1.nickname}}购买了该图册
								</view>
							</view>
							<view class="" v-if="item1.appraise > 0">
								<u-rate inactive-color="red" :disabled="true" :count="item1.appraise"></u-rate>
							</view>
							<view class="" v-if="item1.appraise == 0">
								未评价
							</view>
						</view>
					</block>
					
				</view>
				
				
				
				<view class="gotoBuy flex-around">
				
					<!-- <block v-for="(item, index) in list" :key="index"> -->
						<navigator v-if="item.pj != 1" url="/#" class="nav" style="width: 300rpx;background-color: #54599B;"
							@click="show1 = true">
							立即评价
						</navigator>
				
						<!-- <view class="nav" style="width: 300rpx; background-color: #F8F8F8;color: #717171;" @click="show = true">
							删除
						</view> -->
					<!-- </block> -->
				</view>
				
			</block>
		</view>



		



		


		<u-modal v-model="show" :show-cancel-button="true" @confirm="confirm" :content="content">
		</u-modal>

		<u-popup v-model="show1" mode="center" border-radius="14">
			<view class="w500 h100 text-center" style="line-height: 100rpx;">
				<text>请选择你的评价:</text>
				<u-rate :count="count" :v-model="value1" @change="changeRate"></u-rate>
			</view>
			<view class="w500 100 text-center flex align-center justify-between borTop" style="line-height: 100rpx;">
				<view class="w300 h100" style="color: #54599B; text-align: center;" @tap="addProp">
					确定
				</view>
				<view class="w300 h100" style="text-align: center;" @tap="show1 = false">
					取消
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '图册详情',
				value: 2,
				list: [{
					name: '1111',
					value: 2
				}, {
					name: '3333',
					value: 2
				}],
				img: [],
				orderId: '',
				show: false,
				show1: false,
				count: 4,
				value1: '',
				imgs: this.$images,
				content: '确定删除!'
			}
		},

		onLoad(e) {

			this.orderId = e.orederId
			this.listInfo(e.id)
		},
		onReachBottom() {

		},
		methods: {

			goBack(id) {
				// console.log('pages/site/evaluate',id)
				uni.navigateTo({
					url: '/pages/site/evaluate?id=' + id
				})
			},
			
			phone1(urls){
				uni.previewImage({
					urls:[urls],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			async addProp() {
				const res = await this.$u.post('api/hotel/discuss', {
					id: this.orderId,
					appraise: this.value1,

				})
				if (res.code !== 1) return this.$tools.msg(res.msg)
				this.$tools.msg(res.msg)
				uni.navigateBack({
					delta: 1
				})
				console.log('提交', res)
				this.$tools.msg(res.msg)
			},

			changeRate(e) {
				this.value1 = e
			},

			async confirm() {
				const res = await this.$u.post('api/hotel/delete', {
					id: this.orderId,
					uid: uni.getStorageSync('uid')
				})
				if (res.code == 1) {
					this.$tools.msg(res.msg)

					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}
			},


			async listInfo(id) {
				const res = await this.$u.post('api/hotel/details', {
					id,
					uid: uni.getStorageSync('uid')
				})
				this.list = res.data
				console.log(this.list)
			},

			image() {
				console.log(9999);
				uni.previewImage({
					urls: [...this.img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},

			buy() {
				console.log('唤起支付')
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(Date.now()),
					nonceStr: 'A1B2C3D4E5',
					package: 'prepay_id=wx20180101abcdefg',
					signType: 'MD5',
					paySign: '',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});

			},

			// 复制文本
			copy() {
				uni.setClipboardData({
					data: 'hello',
					success: function() {
						console.log('success');
						// this.$tools.msg('复制成功')
					}
				});

				// uni.getClipboardData({
				//     success: function (res) {
				//         console.log(res.data);
				//     }
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.box-info1 {
		width: 100%;
		height: 240rpx;
		margin-top: 30rpx;
		border-bottom: 1rpx solid #F8F8F8;
	
		.box1 {
			display: flex;
			align-items: center;
	
			.box1-left {
				width: 148rpx;
				height: 148rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;
	
				
			}
		}
	}
	
	
	
	.conter {
		width: 100%;
		height: 100vh;
		padding: 0 30rpx;
		background-color: #FFFFFF;

		// image {
		// 	width: 100%;
		// 	height: 100%;
		// }

		.left-box {

			.left-image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
				border-radius: 30rpx !important;

				// image {
				// 	width: 100%;
				// 	height: 100%;
				// 	border-radius: 30rpx !important;
				// }
			}
		}

		.money {
			width: 180rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			color: #FF0000;
			display: flex;
			padding-left: 10rpx;
			align-items: center;
			background-color: #FFE5E5;
		}



		.box-info {
			width: 100%;
			height: 240rpx;
			margin-top: 30rpx;
			border-bottom: 1rpx solid #F8F8F8;

			.box1 {
				// display: flex;
				// align-items: center;

				.box1-left {
					// width: 148rpx;
					// height: 148rpx;
					// position: relative;
					// border-radius: 10rpx;
					// margin-right: 30rpx;

					.box1-left-image {
						width: 148rpx;
						height: 148rpx;
					}

					.displex-box {
						position: absolute;
						top: 50%;
						left: 50%;
						width: 120rpx;
						height: 46rpx;
						background-color: #000000;
						opacity: 0.4;
						color: #FFFFFF;
						line-height: 46rpx;
						text-align: center;
						border-radius: 14rpx;
						transform: translate(-50%, -50%);
					}
				}
			}
		}



		.box2 {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
		}


		.user-info {
			width: 100%;
			// height: 100rpx;
			// line-height: 100rpx;
			color: #232323;
			border-radius: 10rpx;
			padding: 20rpx;
			background-color: #F8F8F8;

			.user-info-left {
				display: flex;
				align-items: center;
			}

			.user-image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
				margin-right: 30rpx;

				image {
					border-radius: 10rpx;
				}
			}

			.box3 {
				height: 80rpx;
				display: flex;
				align-items: center;
			}
		}


		.bgc {
			height: 90rpx;
			line-height: 90rpx;
			padding-left: 30rpx;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			color: #3B43BF;
		}

		.bgc-text {
			padding: 10rpx 25rpx;
			border-radius: 35rpx;
			color: #717171;
			background-color: #F8F8F8;
		}




		.gotoBuy {
			// position: fixed;
			width: 100%;
			height: 80rpx;
			margin: 30rpx auto;

			.nav {
				height: 80rpx;
				line-height: 80rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 40rpx;
			}
		}

	}

	.borTop {
		border-top: 1rpx solid #EEEEEE;
	}
</style>
